<template>
	<view class="container" :style="{paddingTop: `${getSystemInfo.navBarHeight}px`}">
		<navBar title="门店地图" />
		
		<map
			name=""
			id="map"
			class="map"
			:longitude="location.longitude"
			:latitude="location.latitude"
			:show-location="showLocation"
			:enable-3D="enable3D"
			:scale="13"
			:show-compass="showCompass"
			:markers="markers"
			@markertap="onmarkertap"
		></map>
		
		
		<ww-bottom-drawerapp
			ref="drag"
			:proportionShow='proportionvc'
			:dragHandleHeight="handleHeight"
			:isExpand="mExpand"
			@callExpand="onCallExpand"
			:canDrag="canDarg"
			:dragLength="dragLength" 
			:transitionTime='transitionTime'
			:menuHeight='menuHeight'
			>
			<slot>
				<!-- 填充内容 -->
				<scroll-view
					:scroll-y="mExpand"
					:style="{width: '100%', height: menuHeight + 'px', paddingBottom: '80px'  }"
					@scrolltoupper="upper"
					@scrolltolower="lower"
					@scroll="scroll"
				>
				
				<!--搜索框-->
				<!-- <view class="search-input" @click="handleClick"> -->
				<view class="search-input">
					<uni-easyinput
						prefixIcon="search"
						v-model="value"
						placeholder="请输入门店名或地址"
						@confirm="handleSearch"
						@clear="handleClear"
						confirmType="搜索"
					></uni-easyinput>
				</view>
				
				<!-- 数据列表组件 -->
				<List
					:keyword="value"
					ref="list"
					top="0"
					:mapShow="false"
					:popupShadowIndex="100"
					selectPosition="static"
					mainWrapPadding="20rpx 32rpx 0"
					:popupTop="100"
					popupPosition="absolute"
					:propsPopupShow="false"
				/>
		
				</scroll-view>
			</slot>
		
		</ww-bottom-drawerapp>
		
		<!-- 弹出层 -->
		<view class="c-shadow" v-if="shadowShow" @click="clickShadow">
			<view class="cs-content" @click.stop>
				<view class="csc-info">
					<view class="csci-img">
						<image :src="itemObj.photo1" mode="scaleToFill"></image>
					</view>
					<view class="csci-desc">
						<view class="cscid-name"> {{ itemObj.name }} </view>
						<view class="cscid-address">
							<text class="cscida-km"> {{ itemObj.distance || 0 }}km</text>
							<text class="csc-flag"> | </text>
							<text class="cscida-site"> {{ itemObj.address }} </text>
						</view>
					</view>
				</view>
				
				<view class="csc-button">
					<button type="primary" @click.stop="handleDH">导航</button>
					<button type="primary" @click.stop="gotoDetail">查看详情</button>
				</view>
			</view>
		</view>
	
		<!-- tabBar -->
		<view class="c-tarBar">
			<view class="ct-item" v-for="item in tabBarList" :key="item.url" @click="clickTabBar(item.url)">
				<image :src="item.icon" />
				<text>{{ item.name }}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import iIndex from '@/static/img/tabbar/ic_index.png'
	import iStore from '@/static/img/tabbar/ic_store_active.png'
	import iCart from '@/static/img/tabbar/ic_cart.png'
	import iMine from '@/static/img/tabbar/ic_mine.png'
	import List from '@/pages/store/components/list.vue'
	import navBar from '@/components/navBar.vue'
	import { mapGetters } from 'vuex'
	export default {
		components: {
			List,
			navBar
		},
		data() {
			return {
				iIndex,
				// 地图参数
				location: {
					longitude: 0,
					latitude: 0
				},
				showLocation: false,	// 显示带有方向的当前定位点
				enable3D: false,	// 是否显示3D楼块	
				showCompass: true,	// 是否显示指南针	
				markers: [],
				
				// 抽屉参数
				proportionvc: 0.34, //抽屉初始显示的位置，内容的百分比
				handleHeight: 40, //抽屉顶部边框高度，可以设置0，隐藏
				mExpand: false, // 初始是否展开状态和动态控制展开收缩另提供状态监听@callExpand
				dragLength: 100, // 收缩或者展开需要滑动的最短距离px
				transitionTime: 0.3,	// 完成剩下的展开收缩时间秒s
				menuHeight: 400, //计算预设菜单的高度 px
				
				value: '', // 搜索框
				
				dataList: [],	// 地图锚点数据源
				shadowShow: false, // 弹出层
				itemObj: {},	// 点击门店信息
				
				// 调用接口的参数
				flag: true,
				timer: null,
				
				// tabBar
				tabBarList: [
					{
						name: '首页',
						icon: iIndex,
						url: '/pages/index/index/index'
					},
					{
						name: '门店',
						icon: iStore,
						url: '/pages/store/list/list'
					},
					{
						name: '购物车',
						icon: iCart,
						url: '/pages/cart/index/index'
					},
					{
						name: '我的',
						icon: iMine,
						url: '/pages/mine/home'
					},
				]
			};
		},
		computed: {
			...mapGetters('global', ['getLocation', 'getNowLocation', 'getSystemInfo'])
		},
		methods: {
			handleAction(type){
				if(type === 'home'){
					uni.switchTab({
						url: '/pages/index/index/index'
					})
					uni.$emit('refreshIndex')
				}else {
					uni.navigateBack()
				}
			},
			clickTabBar(url){
				uni.switchTab({
					url
				})
			},
			handleClear(){
				this.value = ''
				this.$nextTick(() => {
					this.$refs.list.init()
					this.handleSearch()
				})
			},
			handleSearch() {
				this.$refs.list.data = []
				this.$refs.list.total = 0
				this.$refs.list.initData()
			},
			handleDH(){
				const { lng, lat, name, address } = this.itemObj
				uni.openLocation({
					longitude: lng,
					latitude: lat,
					name,
					address,
				});
				this.clickShadow()
			},
			gotoDetail(){
				const { id, lng, lat } = this.itemObj
				uni.navigateTo({
				  url: `/storePack/detail/detail?terminalId=${id}&longitude=${lng}&latitude=${lat}`
				})
				this.clickShadow()
			},
			clickShadow(){
				this.shadowShow = false
				this.itemObj = {}
			},
			onmarkertap(e) {
				if(e.detail.markerId === 0){
					return false
				}
				const obj = this.dataList.find(i => i.id === e.detail.markerId)
				this.itemObj = obj || {}
				this.shadowShow = true
			},
			handleClick(){
				uni.navigateTo({
				  url: `/pages/store/searchList/searchList`
				})
			},
			initNowLocation() {
				const {  longitude, latitude } = this.getNowLocation
				this.location.longitude = longitude
				this.location.latitude = latitude
				// 车主标识
				this.markers.unshift({
					id: 0,
					longitude,
					latitude,
					iconPath: 'https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/store/ic_chezhu.png',
					width: 32,
					height: 55,
				})
			},
			async initData() {
				const {  cityCode ,longitude, latitude } = this.getLocation
				const {  longitude: nowLng, latitude: nowLat } = this.getNowLocation
				const res = await this.$request({
					url: '/api-user/new-new-terminal/shopList',
					data: {
						pageNum: 1,
						pageSize: 10000,
						cityCode,
						cityLng: longitude,
						cityLat: latitude,
						nowLng,
						nowLat,
					}
				})
				
				// 标记
				if(res.datas && res.datas.data.length){
						res.datas.data.forEach(i => {
							this.markers.push({
								id: i.id,
								longitude: i.lng,
								latitude: i.lat,
								iconPath: 'https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/store/ic_pic_mendian.png',
								width: 18,
								height: 22,
							})
						})
					}
				this.dataList = res.datas.data
			},
			upper(e) {
				// console.log(e)
			},
			lower(e) {
				// console.log(e)
			},
			scroll(e) {
				this.mscrollTop = e.detail.scrollTop
				if((e.detail.scrollTop >= 1000) && (this.$refs.list.data.length <= this.$refs.list.total) && this.flag){
					if (this.$refs.list.data.length >= this.$refs.list.total) {
						this.$refs.list.loadMoreText = "没有更多数据了!"
						clearTimeout(this.timer)
						return;
					}
					
					this.flag = false
					this.$refs.list.showLoadMore = true;
					this.$refs.list.formDatas.pageNum += 1
					this.$refs.list.initData()
					this.timer = setTimeout(() => {
						this.flag = true
					}, 1000)
				}
			},
			canDarg(){
				// #ifdef MP-ALIPAY
				return this.mscrollTop<30
				// #endif
				return true
			},
			onCallExpand(e) { //展开搜索的回调监听
				this.mExpand = e.value
			},
		},
		onLoad(){
			this.initData()
			this.initNowLocation()
			this.$refs.list.init()
			this.$refs.list.initData()
		}
	}
</script>

<style lang="scss" scoped>
.container {
	height: 100%;
	box-sizing: border-box;
	
	.map {
		height: 100%;
		width: 100%;
		z-index: -1;
	}
	
	// 抽屉
	/deep/ .drawer-content {
		z-index: 100;
	}
	
	.search-input {
		padding: 0 32rpx;
		margin-bottom: 30rpx;
		/deep/ .uni-easyinput__content {
			border-radius: 4px;
			height: 36px;
			background-color: #F3F3F3 !important;
		}
	}
	
	// 弹出层
	.c-shadow {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.4);
		.cs-content {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			position: fixed;
			left: 50%;
			transform: translateX(-50%);
			bottom: 100px;
			// z-index: idnex;
			width: 80%;
			box-sizing: border-box;
			padding: 68rpx 48rpx;
			background: #ffffff;
			box-shadow: 0rpx 10rpx 30rpx 2rpx rgba(0,0,0,0.1);
			border-radius: 20rpx;
			border: 1px solid #EAEAEB;
			.csc-info {
				display: flex;
				.csci-img {
					margin-right: 18rpx;
					image {
						width: 120rpx;
						height: 48px;
					}
				}
				.csci-desc {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					overflow: hidden;
					font-size: 12px;
					.cscid-name {
						font-size: 15px;
						color: rgba(0,0,0,0.85);
						text-shadow: 0 0 0.1px currentcolor;
					}
					.cscid-address {
						display: flex;
						align-items: center;
						color: rgba(0,0,0,0.3);
						.cscida-km {
							color: $uni-primary;
						}
						.csc-flag {
							margin: 0 8rpx;
						}
						.cscida-site {
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}
					}
				}
			}
		
			.csc-button {
				margin-top: 46rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				button {
					padding: 0 !important;
					margin: 0 !important;
					width: 45%;
					height: 40px;
					line-height: 40px;
					font-size: 14px;
					background-color: $uni-primary;
					color: #ffffff;
					text-align: center;
				}
			}
		}
	}
	
	// tabBar
	.c-tarBar {
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 99999;
		display: flex;
		justify-content: space-around;
		height: 50px;
		font-size: 11px;
		background-color: #ffffff;
		width: 100%;
		border-top: 1rpx solid #cccccc;
		padding-bottom: 50rpx;
		.ct-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding-top: 6px;
			box-sizing: border-box;
			&:nth-child(2){
				color: $uni-primary;
			}
			image {
				width: 24px;
				height: 24px;
				margin-bottom: 3px;
			}
		}
	}
}
</style>
